<template>
  <view>
    <!-- 传值给子组件做渲染,,,注意必须是把遍历出来的每一项传递过去 -->
    <!-- 比如:goods="item"  ,然后子组件定义 props:{goods:{type:Object,default: () => {}}} -->
    <my-goods
      :goods="item"
      v-for="item in goodsList"
      :key="item.cat_id"
    ></my-goods>
  </view>
</template>

<script>
export default {
  data () {
    return {
      queryObj: {
        query: '',
        cid: '',
        pagesize: 10,
        pagenum: 1
      },
      goodsList: [],
      total: 0,
      isLoading: false
    }
  },
  onLoad (options) {
    console.log('options', options)
    // 没传值就默认为空
    this.queryObj.query = options.query || ''
    this.queryObj.cid = options.cid || ''
    this.getGoodsData()
  },
  // 下拉------刷新(微信小程序官网定义的方法)
  // 完成下拉刷新后存在一个问题???
  // 下拉刷新有一个自己的加载样式,同时又有一个loging,那每次下拉就出去两个加载样式了,不美观,
  // 然后呢,loging又是全局的,,,在加一个属性,(在request.js里面)
  onPullDownRefresh () {
    this.queryObj.pagenum = 1
    this.goodsList = []
    this.getGoodsData(true)
  },
  // 上拉------加载更多(微信小程序官网定义的方法)
  onReachBottom () {
    // 判断是够在加载,loading在加载就的时候就阻止代码往下运行,,,只有loading停止加载了代码才往下执行
    // 如果这里不阻止代码运行,那可能就会出现同时发多个请求,就是第一次请求还没有完成,第二次请求又开始了
    
    if (this.isLoading) return
    // 判断是否还有数据
    // 如果数据的长度大于等于总条数 this.total
    // 要到分类页面里面去操作才能实现效果,分类里面总条数的数量比较少
    if (this.goodsList.length >= this.total) {
      // 提示信息
      uni.showToast({
        title: '没有更多数据了~',
        icon: 'none'
      })
      return
    }
    this.queryObj.pagenum += 1
    this.getGoodsData(false)
  },
  methods: {
    // 这里用的request.js里面的isPullDownRefresh
    async getGoodsData (isPullDownRefresh = false) {
      // 只要发送请求的时候就提示loading
      this.isLoading = true
      const resgoods = await uni.$request({
        url: 'goods/search',
        data: this.queryObj,
        isPullDownRefresh
      })
      console.log('resgoods', resgoods)
      if (resgoods.meta.status === 200) {
        // 拿到数据后关闭loading
        this.isLoading = false
        // 下拉刷新的时候,在原有的数据后面在添加数据
        this.goodsList = [...this.goodsList, ...resgoods.message.goods]
        this.total = resgoods.message.total
      }
    }
  }
}
</script>

<style></style>
